<template>
  <div>
    <!-- 编辑客资 -->
    <div slot="title" class="head-list">
      <div class="username">{{username}}</div>
    </div>
    <div>
      <Tabs :value="name" :animated="false" @on-click="handleEditTabClick" name="1">
        <TabPane label="对话" name="duihua" tab="1">
        </TabPane>
        <TabPane label="客资" name="kezi" tab="1">
          <kezi @queryALlKzkezi="editBaoCun"></kezi>
        </TabPane>
        <TabPane label="订单" name="dingdan" tab="1" :disabled="rowData.kz_status_id < 5">
          <order></order>
        </TabPane>
        <TabPane label="会员" name="huiyuan" tab="1" :disabled="true"></TabPane>
      </Tabs>
    </div>
    <div class="g-kz-menu">
      <div class="kz-menu">
        <div class="g-kz-search">
          <el-input placeholder="搜索" v-model="searchValue" @input="searchVhlist" size="mini"></el-input>
          <i class="el-icon-circle-close clear-icon" @click="clearKzVhList"></i>
        </div>
        <ul class="g-kz-menu-list">
          <li :class="isActiveVh == index ? 'check-menu' : '' " v-for="(item,index) in vhListSearch"
            @click.self="goActiveLi(index)" :key="item.kz_vh_id" @mouseover.self="mouseoverKzVh($event)"
            @mouseleave="mouseleaveKzVh($event)">
            <span class="men-name" @click.self="goActiveLi(index)">{{item.wx_id}}</span>
            <span class="men-time" @click.stop="deleteKzVh(item)" v-if="isActiveVh != index">
              <span class="menu-close"> <i class="el-icon-close"></i></span>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import kezi from './components/kezi.vue'
  import order from './components/order.vue'
  // 引入城市数据
  import {
    provinceAndCityData,
    provinceAndCityDataPlus,
    regionData,
    regionDataPlus,
    CodeToText,
    TextToCode,
  } from "@/components/RegionPicker";
  import {
    getAllKzStatus,
    deleteKzViewHistory,
    getViewHistory,
    getKzOperationLog,
    updateKz,
    addViewHistory,
  } from "@/api/kz/index";
  import {
    getOrder,
    getAllstore,
    getAllType,
  } from "@/api/order/index";
  import {
    getEmployee
  } from '@/api/common.js'
  export default {
    components: {
      kezi,
      order
    },
    props: {
      name: {
        type: String,
        default: ''
      },
    },
    data() {
      var validatePass = (rule, value, callback) => {
        if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(value)) {
          callback(new Error('请输入正确的手机号'));
        } else {
          if (this.addForm.checkPass !== '') {
            this.$refs.addFormRef.validateField('checkPass');
          }
          callback();
        }
      };
      return {
        searchValue: '',
        username: sessionStorage.getItem('USER_NAME'),
        // name: 'kezi',
        storeTableData: [],
        collectionBtn: true, // 到账记录button
        kzOperateLogList: [], // 操作日志列表
        clueLogActiveName: 'first', // 操作日志
        isActiveVh: 0,
        employee_id: '1',
        activeName: 'first',
        kzStatusList: [], // 客资状态列表
        storeList: [], // 门店列表
        promoterList: [], // 推广列表
        typeList: [], // 类型列表
        operatorSalesList: [], // 网销列表
        addrOptions: regionDataPlus, // 地址列表
        vhList: [], // 客资浏览记录
        vhListSearch: [],
        online_sales_options: [ // 无效原因列表
          {
            value: 'wuxiao',
            label: '无效原因',
            children: [{
                value: 'wuxiao1',
                label: '无效联系不上'
              },
              {
                value: 'wuxiao2',
                label: '无效空号'
              },
              {
                value: 'wuxiao3',
                label: '无效无拍摄需求'
              },
              {
                value: 'wuxiao4',
                label: '无效广告'
              },
              {
                value: 'wuxiao5',
                label: '预算太低'
              }
            ]
          },
          {
            value: 'liushi',
            label: '流失原因',
            children: []
          }
        ],
        tracking_range_list: [{
            value: '0',
            label: '待定 未联系上'
          },
          {
            value: '1',
            label: '退单失败'
          },
          {
            value: '2',
            label: '一周内再追踪'
          },
          {
            value: '3',
            label: '一月内再追踪'
          },
          {
            value: '4',
            label: '半年内再追踪'
          },
          {
            value: '5',
            label: '一年内再追踪'
          },
          {
            value: '6',
            label: '不说话'
          },
          {
            value: '7',
            label: '待跟踪 婚期不急'
          },
          {
            value: '8',
            label: '进店走单'
          },
          {
            value: '9',
            label: '待确认需求50%'
          },
          {
            value: '10',
            label: '加V不说话'
          }
        ],
        menshiList: [{
            value: '0',
            label: '中山熙薇婚纱摄影',
            children: [{
                value: '01',
                label: '林林'
              },
              {
                value: '02',
                label: '东尼店长'
              },
              {
                value: '03',
                label: '娜娜'
              },
              {
                value: '04',
                label: '希希'
              },
              {
                value: '05',
                label: '若汐'
              },
              {
                value: '06',
                label: '婷婷'
              },
              {
                value: '07',
                label: '林夕'
              },
              {
                value: '08',
                label: '阿文'
              },
              {
                value: '09',
                label: '小雨'
              },
              {
                value: '10',
                label: '安迪'
              },
              {
                value: '11',
                label: '熙薇大东'
              },
              {
                value: '12',
                label: '安迪'
              },
              {
                value: '13',
                label: '珊珊'
              },
              {
                value: '14',
                label: '嘉嘉'
              },
              {
                value: '15',
                label: '小锦'
              },
              {
                value: '16',
                label: '何敏欢'
              },
              {
                value: '17',
                label: '大东'
              },
            ]
          },
          {
            value: '2',
            label: '淡水熙薇婚纱摄影',
            disabled: true,
          },
          {
            value: '3',
            label: '惠城熙薇婚纱摄影',
            disabled: true,
          },
          {
            value: '4',
            label: '深圳熙薇婚纱摄影',
            disabled: true,
          },
          {
            value: '5',
            label: '博罗熙薇婚纱摄影',
            disabled: true,
          }
        ],
        editFormRules: {
          kz_phone: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          source_channel: [{
            message: '请选择渠道',
            trigger: 'blur'
          }]
        },
        rowData: {}
      }
    },
    created() {
      console.log('state.rowData', this.$store.state.layout.app.rowData);
      this.rowData = this.$store.state.layout.app.rowData
      this.getTypes()
      this.getCateEmployee(9)
      this.getCateEmployee(10)
      this.initData()
    },
    watch: {
      '$store.state.layout.app.rowData'(newValue, oldValue) {
        this.rowData = newValue
        for (let key in this.rowData) {
          if (this.rowData[key] == null || this.rowData[key] == "null") {
            this.rowData[key] = ""
          }
        }
        this.initData()
      }
    },
    methods: {
      initData() {
        this.rowData.store_id = parseInt(this.rowData.store_id)
        this.rowData.type_id = parseInt(this.rowData.type_id)
        this.rowData.status_id = parseInt(this.rowData.status_id)
        this.rowData.daodiantime1 = new Date()
        this.rowData.daodiantime2 = new Date()
        const i = this.vhList.findIndex(item => item.kz_id === this.rowData.kz_id)
        if (i < 0) {
          addViewHistory({
            employee_id: this.employee_id,
            kz_id: this.rowData.kz_id
          }).then(res => {
            console.log('插入某个用户的浏览客资记录', res);
            if (res.rstpCode === '0000') {
              this.getVhList()
            } else {
              this.$Message.error(res.rstpMsg);
            }
          })
        }

      },
      // 查询客资操作日志
      getOperaLog() {
        getKzOperationLog({
          kz_id: this.rowData.kz_id
        }).then(res => {
          console.log('查询客资操作日志', res);
          if (res.rstpCode === '0000') {
            this.kzOperateLogList = res.data
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      // 查询浏览记录
      getVhList() {
        getViewHistory({
          employee_id: this.employee_id
        }).then(res => {
          console.log('获取某个用户的浏览客资记录', res);
          if (res.rstpCode === '0000') {
            this.vhList = res.data
            this.vhListSearch = this.vhList
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      // 删除浏览记录
      deleteKzVh(item) {
        console.log(item);
        deleteKzViewHistory({
          kz_id: item.kz_id,
          employee_id: this.employee_id
        }).then((res) => {
          console.log('删除浏览记录', res);
          if (res.rstpCode === '0000') {
            this.getVhList()
          } else {
            this.$Message.error(res.message);
          }
        });
      },
      // 清空客资浏览记录
      clearKzVhList() {
        this.vhList.forEach(item => {
          this.deleteKzVh(item)
        })
      },
      // 选择浏览记录
      goActiveLi(i) {
        this.isActiveVh = i
        this.rowData = this.vhList[i]
        this.$store.dispatch("layout/app/bcRowData", this.rowData);
        this.rowData.store_id = parseInt(this.vhList[i].store_id)
        this.rowData.type_id = parseInt(this.vhList[i].type_id)
        this.rowData.status_id = parseInt(this.vhList[i].status_id)
      },
      // 得到所有的拍摄类型
      getTypes() {
        getAllType().then(res => {
          console.log('得到所有的拍摄类型', res);
          if (res.rstpCode === '0000') {
            this.typeList = res.data;
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      // 根据条件检索员工信息
      getCateEmployee(roleid) {
        getEmployee({
          role: roleid
        }).then(res => {
          console.log('根据条件检索员工信息', res);
          if (res.rstpCode === '0000') {
            if (roleid == 9) {
              this.operatorSalesList = res.data;
            } else if (roleid == 10) {
              this.promoterList = res.data;
            }
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      // 获取所有店铺列表
      getStore() {
        getAllstore().then(res => {
          console.log('获取所有店铺列表', res);
          if (res.rstpCode === '0000') {
            this.storeList = res.data;
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      // 保存编辑内容
      editBaoCun() {
        this.$emit('queryALlKzkzOrder')
        this.$emit('closeTk')
      },
      // 选择拍摄类型事件
      typeChange(e) {
        this.rowData.type_name = this.typeList.find(item => item.type_id == e).type_name
      },
      // 选择门店事件
      storeChange(e) {
        this.rowData.store_name = this.storeList.find(item => item.store_id == e).store_name
      },
      // 选择完地址后的处理
      handleAreaChange(value) {
        console.log("选择的code数据：", value);
        this.rowData.kz_addr = CodeToText[value[0]] + '/' + CodeToText[value[1]] + '/' + CodeToText[value[2]]
      },
      // 跳转到新建订单页
      goOrder() {
        this.$emit('closeTk')
        sessionStorage.setItem('rowData', JSON.stringify(this.rowData))
        this.$router.push({
          path: '/table/inline-edit-table'
        })
        // row: JSON.stringify(this.rowData)
      },
      // 鼠标移到浏览记录本条记录下展示关闭X
      mouseoverKzVh(e) {
        if (e.currentTarget.children[1]) {
          e.currentTarget.children[1].firstElementChild.style.display = 'block'
        }
      },
      // 鼠标移到浏览记录本条记录下隐藏关闭X
      mouseleaveKzVh(e) {
        if (e.currentTarget.children[1]) {
          e.currentTarget.children[1].firstElementChild.style.display = 'none'
        }
      },
      searchVhlist(e) {
        if (e == '') {
          this.vhListSearch = this.vhList
        } else {
          this.vhListSearch = this.vhList.filter(item => {
            return item.wx_id.includes(e)
          })
        }
      },
      // 操作日志处理事件
      handleClueLogClick() {

      },
      handleEditTabClick(val) {
        console.log(val);
        if (val === 'dingdan') {
          getOrder({
            kz_id: this.rowData.kz_id
          }).then(res => {
            console.log('根据客资id查询订单信息', res);
            if (res.rstpCode === '0000') {
              this.$store.dispatch("layout/app/bcOrderRowData", res.data[0]);
            } else {
              this.$Message.error(res.rstpMsg);
            }
          })
        }
      }
    },
  }
</script>

<style scoped lang="less">
  .kz-dialog {
    .username {
      padding: 8px 4px 0 10px;
    }

    .kz-container {
      .header {
        .details-basic-header {
          font-size: 12px;
          position: relative;

          .basic-flex {
            margin-left: 1px;
            display: flex;
            align-items: center;

            .basic-flex-item {
              margin-right: 10px;
            }
          }

          .basic-flex-title {
            margin-right: 15px;
            border-bottom: 1px solid #e2e2e2;
          }

          .basics-flex-right {
            margin-left: auto;
            display: flex;
            align-items: center;
          }

          .basic-default {
            color: #999;
            font-weight: 400;
          }
        }
      }

      .type-list {
        margin-top: 1%;
      }
    }

    .footer-tool {
      margin-top: 10px;

      .tool-appoint {
        .wx-flex {
          display: flex;
          align-items: center;
          margin-top: 5px;
          border-radius: 4px;
          overflow: hidden;
          border: 1px solid #dcdfe6;
        }

        .wx-flex-radio {
          background: #eee;
          border-right: 1px solid #dcdfe6;
          height: 30px;
          line-height: 30px;
          margin-right: 0;
          padding: 0 20px;
          border-radius: 0;
        }

        .wx-check-radio {
          border-color: #2f88ff;
        }

        .wx-next-color {
          background: #ffb6c1;
        }

        .wx-make-shop {
          background: #bfffab;
        }
      }

      .footer-tool-border {
        // border-top: 1px solid #d9d9d9;
        position: relative;

        .tool-collect {
          .entry-flex-item {
            margin-left: -1px;
            height: 30px;
            line-height: 30px;
            margin-top: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            overflow: hidden;
            border: 1px solid #dcdfe6;
            position: relative;
            font-size: 12px;

            .channel-flex {
              flex: 1;
            }

            .entry-flex-label {
              width: 76px;
              height: 30px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              color: #495060;
              text-align: center;
              background: #eee;
              border-right: none;
              border-right: 1px solid #dcdfe6;
            }
          }
        }
      }
    }

    .richTextDiv {
      margin-top: 10px;
    }

    .g-kz-menu {
      position: absolute;
      top: 0;
      left: -150px;
      width: 150px;
      border-right: 1px solid #ebebeb;
      background: #fff;
      height: 100%;
      border: 1px solid #ebebeb;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;

      .g-kz-search {
        padding: 10px;
        height: 50px;
        background: #f2f2f2;
        display: flex;
        align-items: center;

        .clear-icon {
          font-size: 18px;
          cursor: pointer;
          margin-left: 10px;
        }
      }

      .g-kz-menu-list {
        li {
          font-size: 12px;
          padding: 9px 8px 11px;
          border-bottom: 1px solid #e8ebf1;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
          line-height: 20px;

          &:hover {}

          .men-name {
            width: 100px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            color: #333;
          }

          .men-time {
            color: #999;
            font-size: 12px;
            font-weight: 400;

            .menu-close {
              font-size: 12px;
              color: #000;
              margin-left: 4px;
              display: none;
              transition: all .8s;
            }
          }
        }

        .check-menu {
          background: #ecf5ff;
          color: #333;
          position: relative;

          &::after {
            content: "";
            width: 3px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background: #2f88ff;
          }
        }
      }
    }

    .clueLog {
      width: 550px;
      height: 100%;
      position: absolute;
      right: -550px;
      bottom: 0;
      background: #fff;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-left: 1px solid #d9d9d9;

      .g-tabs-crm {
        width: 100%;
        overflow-x: auto;
        margin-top: 10px;
        padding-left: 14px;
        position: relative;

        .collection-log {
          width: 100%;
          height: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;

          .collection-log-div {
            padding: 16px 20px 0px;

            &:first-child {
              border-bottom: 1px solid rgb(226, 226, 226);
            }

            .header {
              padding-bottom: 20px;
              display: flex;

              span {
                flex: 1;
              }
            }

            .table {
              padding-bottom: 20px;
              box-sizing: border-box;
            }
          }
        }

        .toStore-log {
          width: 100%;
          height: 100%;
          padding: 20px;

          .title {
            margin-bottom: 20px;
          }
        }

        .tabs-content-height {
          height: calc(100% - 50px);
          padding-bottom: 0;
          overflow: hidden;

          .eidt-log {
            width: 100%;
            height: 100%;
            overflow: auto;
            padding: 16px 10px 20px;

            .tabInfo {
              display: flex;
              height: 35px;
              line-height: 35px;
              background: #ddd;
              text-align: center;
              margin: 0 0 10px 0;
              justify-content: space-between;
              padding: 0 10px;

              .itemData {
                color: #2e8ff4;
              }
            }

            .logBox {
              min-height: 50px;
            }

            .remark-item {
              display: flex;
              align-items: center;

              .remark-item-img {
                width: 30px;
                height: 30px;
                margin-right: 10px;
                border-radius: 50%;
              }

              .remark-card {
                border-radius: 4px;
                padding: 6px 10px;
                min-height: 30px;
                border: 1px solid #e4e7ed;
                font-size: 12px;
                flex: 1;

                .change-author {
                  color: #a2a3a4;
                }
              }

              +.remark-item {
                margin-top: 20px;
              }
            }
          }
        }
      }
    }
  }

  .footer-button {
    border-top: 1px solid #d9d9d9;
    padding: 12px 20px;

    .dialog-footer {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
